<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <%@ include file="/pages/common/head.jsp"%>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*设置图片大小*/
        .img1 {
            width: 800px;
            height: 303px;
            cursor: pointer;
        }
        #transform {
            position: absolute;
            top: 50px;
            left: 27%;
            list-style: none;
        }
        /*设置轮播图片样式*/
        #transform li {
            position: absolute;
            opacity: 100;
        }
        #point {
            position:relative;
            top: 330px;
            left: 42%;
            display: flex;
            list-style: none;
        }
        /*小点样式*/
        #point li {
            width: 36px;
            height: 16px;
            background-color: gray;
            border-radius: 10px;
            margin-left: 20px;
        }
        #point li:hover {
            background-color:  white;
            cursor: pointer;
        }
        /*    左右切换按钮样式*/
        #left {
            height: 110px;
            background-color: #545454;
            border-radius: 5px;
            position: absolute;
            top: 300px;
            left: 20.3%;
            font-size: 70px;
            font-weight: bold;
            color: white;
            cursor: pointer;
        }
        #right {
            height: 110px;
            border-radius: 5px;
            background-color: #545454;
            position: absolute;
            top: 300px;
            left: 75.8%;
            font-size: 70px;
            font-weight: bold;
            color:white;
            cursor: pointer;
        }
        #right:hover{
            background-color: #979797;
        }
        #left:hover{
            background-color: #979797;
        }
        #box{
            left: -50px;
            float: top;
            position: relative;
        }
        .divfoot{
            position: fixed;
            bottom: 0;
            height: 128px;
            width: 100%;
            background-color: black;
        }
        .divfoot p{
            text-align: center;
            font-size: 20px;
            padding: 0;
            height: 30px;
            line-height: 30px;
            color: #bdbdbd;
            margin:0 0 -16px 0 ;
        }
        .divfoot p a{
            color: white;
            text-decoration: none;
        }
        .divfoot  p a:hover{
            color: dodgerblue;
        }
        .btn{
            background-color: deepskyblue;
            cursor: pointer;
            border: 0;
            border-radius: 5px;
            width: 54px;
            height: 27px;
            margin-top: 4px;
        }
    </style>
</head>
<body>
<div id="header0">
    <img alt="loading" src="static/img/beauty.jpg" width="120px" height="100px"  align="middle" style="margin-top: -12px;cursor: pointer;border-radius: 5px">&nbsp;&nbsp;
    <a style="color: white"  href="pages/user/first_page.jsp">首页</a>&nbsp;
    <a href="pages/user/hot.jsp">热销</a>&nbsp;
    <%--如果用户还没有登录,显示【登录和注册的菜单】 --%>
    <c:if test="${empty sessionScope.user}">
        <a href="pages/user/regist.jsp">注册</a>&nbsp;
        <a href="pages/user/login.jsp">登录</a>&nbsp;
    </c:if>
    <!--
	<%--如果已经登录，则显示登录成功之后的用户信息。--%>
	<c:if test="${not empty sessionScope.user}">
		<a href="userServlet?action=logout">注销</a>&nbsp;&nbsp;
		<a href="orderServlet?action=list">我的订单</a>&nbsp;
		<a href="manager/bookServlet?action=list">游戏管理</a>&nbsp;
	</c:if>
	-->
    <a href="pages/cart/cart.jsp">购物车</a>&nbsp;
</div>

<div id="main1">

    <div id="box"><br>
        <p style="margin:0 0 0 217px;padding: 0; position:relative;color: white;left: 200px">精选和推荐</p>
        <!--轮播图片-->
        <ul id="transform">
            <li><img alt="" class="img1" src="static/img/aier.png"/></li>
            <li><img alt="" class="img1" src="static/img/wuren.png"/></li>
            <li><img alt="" class="img1" src="static/img/yuzhong.png"/></li>
            <li><img alt="" class="img1" src="static/img/momi.png"/></li>
            <li><img alt="" class="img1" src="static/img/do.png"/></li>
            <li><img alt="" class="img1" src="static/img/sea.png"/></li>
        </ul>
        <ul id="point">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="left"><p><</p ></div>
    <div id="right"><p>></p ></div>

    <div class="divfoot"><br>
        <p align="center">登录以查看个性化推荐</p>
        <p align="center">
            <a href="pages/user/login.jsp"><br>
        <p><button type="button" class="btn">&nbsp;&nbsp;登&nbsp;录&nbsp;&nbsp;</button></a></p>
        </p>
        <p align="center">或者<a href="pages/user/regist.jsp">注册</a>并免费加入</p>
    </div>

</div>
</body>
<script type="text/javascript">
    <!--    自动执行定时器函数 图片自动轮播-->
    window.onload = automatic;
    var images = document.getElementById("transform").children;
    var points = document.getElementById("point").children;
    var interval;
    var leftButton = document.getElementById("left");
    var rightButton = document.getElementById("right");
    //设置开始图片下标 从第一张图片开始
    var index = 0;
    //循环设置元素下标
    for (var i = 0;i < images.length;i++){
        images[i].index = i;
        points[i].index = i;
        //添加点击小点切换图片事件
        points[i].onclick = appoint;
        images[i].onmouseover = function (){clearInterval(interval)};
        images[i].onmouseleave = function (){automatic()};
    }
    function appoint(){
        var apo = this.index;
        //循环设置li不透明度为0 也就是不可见
        for (var i = 0;i < images.length;i++){
            images[i].style.opacity = "0";
            points[i].style.backgroundColor="gray";
        }
        images[apo].style.opacity = "100";
        points[apo].style.backgroundColor="white";
    }
    //自动切换图片函数
    function automatic(){
        interval = setInterval(function (){
            //循环设置li不透明度为0 也就是不可见
            for (var i = 0;i < images.length;i++){
                images[i].style.opacity = "0";
                points[i].style.backgroundColor="gray";
            }
            //然后设置指定下标的li的不透明度为100 实现了显示指定下标的图片，而不显示其他图片
            images[index].style.opacity = "100";
            points[index].style.backgroundColor="white";
            //下标自动增长
            index++;
            //下标如果超出范围，将下标重置为0
            if (index == images.length){
                index = 0;
            }
        },1500);
    }
    //为左右切换图片按钮添加事件
    leftButton.onclick = previous;
    //鼠标移动到 上一张 按钮 停止定时器
    leftButton.onmouseover = function (){clearInterval(interval)};
    //鼠标离开 上一张 按钮 开始定时器
    leftButton.onmouseleave = function (){automatic()};
    rightButton.onclick = next;
    //鼠标移动到 下一张 按钮 停止定时器
    rightButton.onmouseover = function (){clearInterval(interval)};
    //鼠标离开 下一张 按钮 开始定时器
    rightButton.onmouseleave = function (){automatic()};
    //切换下一张图片函数
    function next(){
        index = index + 1;
        //如果下标超出范围 将下标赋值为0
        if (index == images.length){
            index = 0;
        }
        //循环设置li不透明度为0 也就是不可见
        for (var i = 0;i < images.length;i++){
            images[i].style.opacity = "0";
            points[i].style.backgroundColor="gray";
        }
        //将下一张图片设置为可见
        images[index].style.opacity = "100";
        points[index].style.backgroundColor="white";
    }
    //切换上一张图片
    function previous(){
        index = index - 1;
        //如果下标超出范围 将下标设置为 图片数量-1
        if (index == -1){
            index = images.length -1;
        }
        //循环设置li不透明度为0 也就是不可见
        for (var i = 0;i < images.length;i++){
            images[i].style.opacity = "0";
            points[i].style.backgroundColor="gray";
        }
        //将上一张图片设置为可见
        images[index].style.opacity = "100";
        points[index].style.backgroundColor="white";
    }
</script>
</html>
